/**

 */
//
//var stage = new createjs.Stage("canvas");
//createjs.Ticker.addEventListener("tick", tick);
//
//// The DragBox listens to mouse events.
//var dragBox = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(0,0,stage.canvas.width, stage.canvas.height));
//dragBox.addEventListener("mousedown", startDrag);
//stage.addChild(dragBox);
//
//// Container to drag around
//var dragContainer = new createjs.Container();
//stage.addChild(dragContainer);
//
//// Create lots of things on the stage.
//var g = new createjs.Graphics().beginFill("#000000").drawCircle(0,0,50);
//for (var i=0, l=300; i<l; i++) {
//    var scale = Math.random() * 3 - 2.5;
//    var box = new createjs.Shape(g)
//        .set({scaleX:scale, scaleY: scale, alpha:Math.random()*0.5+0.5, x:Math.random() * 5000 - 2500, y:Math.random()*5000-2500});
//    box.onPress = pressHandler;
//    dragContainer.addChild(box);
//}
//
//// Drag
//var offset = new createjs.Point();
//function startDrag(event) {
//    offset.x = stage.mouseX - dragContainer.x;
//    offset.y = stage.mouseY - dragContainer.y;
//    event.addEventListener("mousemove", doDrag);
//}
//function doDrag(event) {
//    dragContainer.x = event.stageX - offset.x;
//    dragContainer.y = event.stageY - offset.y;
//}
//
//// Update the stage
//function tick(event) {
//    stage.update();
//}
//
//function pressHandler(e) {
//    e.onMouseMove = function (ev) {
//        e.target.x = ev.stageX - dragContainer.x;
//        e.target.y = ev.stageY - dragContainer.y;
//        update = true;
//    }
//}
//

//////////////////////////////////////////////////////////////////////////////////////////////////


var canvas, stage;

var mouseTarget;	// the display object currently under the mouse, or being dragged
var dragStarted;	// indicates whether we are currently in a drag operation
var offset;
var update = true;

function init() {
    examples.showDistractor();
    // create stage and point it to the canvas:
    canvas = document.getElementById("testCanvas");
    stage = new createjs.Stage(canvas);

    // enable touch interactions if supported on the current device:
    createjs.Touch.enable(stage);

    // enabled mouse over / out events
    stage.enableMouseOver(10);
    stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

    // load the source image:
    var image = new Image();
    image.src = "../_assets/art/daisy.png";
    image.onload = handleImageLoad;
}

function stop() {
    createjs.Ticker.removeEventListener("tick", tick);
}

function handleImageLoad(event) {
    var image = event.target;
    var bitmap;
    var container = new createjs.Container();
    stage.addChild(container);

    // create and populate the screen with random daisies:
    for (var i = 0; i < 100; i++) {
        bitmap = new createjs.Bitmap(image);
        container.addChild(bitmap);
        bitmap.x = canvas.width * Math.random() | 0;
        bitmap.y = canvas.height * Math.random() | 0;
        bitmap.rotation = 360 * Math.random() | 0;
        bitmap.regX = bitmap.image.width / 2 | 0;
        bitmap.regY = bitmap.image.height / 2 | 0;
        bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random() * 0.4 + 0.6;
        bitmap.name = "bmp_" + i;
        bitmap.cursor = "pointer";

        // using "on" binds the listener to the scope of the currentTarget by default
        // in this case that means it executes in the scope of the button.
        bitmap.on("mousedown", function (evt) {
            this.parent.addChild(this);
            this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
        });

        // the pressmove event is dispatched when the mouse moves after a mousedown on the target until the mouse is released.
        bitmap.on("pressmove", function (evt) {
            this.x = evt.stageX + this.offset.x;
            this.y = evt.stageY + this.offset.y;
            // indicate that the stage should be updated on the next tick:
            update = true;
        });

        bitmap.on("rollover", function (evt) {
            this.scaleX = this.scaleY = this.scale * 1.2;
            update = true;
        });

        bitmap.on("rollout", function (evt) {
            this.scaleX = this.scaleY = this.scale;
            update = true;
        });

    }

    examples.hideDistractor();
    createjs.Ticker.addEventListener("tick", tick);
}

function tick(event) {
    // this set makes it so the stage only re-renders when an event handler indicates a change has happened.
    if (update) {
        update = false; // only update once
        stage.update(event);
    }
}
